<template>
  <div id="app">
    <!-- <h1>根组件 {{ $store.state.模块名.属性 }}</h1> -->
    <h1>根组件 {{ this.$store.state.user.name }}</h1>
    <h1>根组件 {{ name }}</h1>
    <button @click="change">改名</button>
  </div>
</template>

<script>

import { mapState } from 'vuex'
export default {
  name: 'app',
  data() {
    return {
      
    }
  },
  methods: {
    change() {
      // 我现在修改的是子模块的数据, 而 commit 里面直接写了子模块的函数名, 如果有多个子模块都叫 setName 将会导致多个子模块的 setName 都调用
        
      // this.$store.commit('setName', '马经理')

      // 如果需要访问命名空间下的 mutations 方法
      // 在函数名前面加 模块名/
      // 模块名/函数名
      this.$store.commit('user/setName', '小黑子')

      // 如果要访问命名空间下的 actions 方法
      // this.$store.dispatch('模块名/方法名', 参数)

    }
  },
  computed: {
    // 如果开启命名空间, 使用辅助函数也会发生变化
    // mapState(模块名, [要导入的数据])
    ...mapState('user', ['name'])
  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>